;
(function(global, factory) {
	typeof global['Long'] === 'object' ? factory() : alert("缺少lgUtil.js");
})(this, function() {
	var _U = Long.Utils.CommonUtil;
	// 附加方法 >>>
	// 附加方法 <<<
	// 混入对象 >>>
	  var mixinerForm = {
			inject:{
				FormInstance:{
					default:''
				}
			},
			computed:{
				itemDisabled:function(){
					var state = this.disabled; 
					if(!state && this.FormInstance) state = this.FoemInstance.disabled; 
					return state;
				}
			}
	}
	;var mixinerEmitter = (function(){
		function bordercast(componentName,eventName,params){
			this.$children.forEach( function(child){
				var name = child.$options.name;
				if(name === componentName){
					child.$emit.apply(child,[eventName].concat(params)); 
				}else{
					boradcast.apply(child,[componentName,eventName].concat([params]));
				}
			}); 
		}
		
		return {
			dispatch:function(componentName,eventName,params){
				var parent = this.$parent || this.$root;
				var name = parent.$options.name; 
				
				while(parent && (!name || name !== componentName)){
					
					parent = parent.$parent;
					
					if(parent){
						name = parent.$options.name; 
					}
				}
				
				if(parent){
					parent.$emit.apply(parent,[eventName].concat(params)); 
				}
					
			},
			broadcast(componentName, eventName, params) {
			    broadcast.call(this, componentName, eventName, params);
			}
		}
	})()
	// 混入对象 <<<
	//  注册组件 >>>
	// 面板 
	// gap-outer  :  面板 margin 距离
	// gap-interior :  面板 padding 距离
	// body-style  设置body的样式  {}
	Vue.component("lg-card", {
		template: "#lg-card",
		props: {
			gapOuter: {
				type: [String, Number],
				default: 0.2
			},
			gapInterior: {
				type: [String, Number],
				default: 0.2
			},
			bodyStyle: {
				type: [Object]
			}
		},
		data: function() {
			return {

			}
		},
		computed: {
			gapStyleObj: function() {
				return {
					margin: this.gapOuter + "rem",
					padding: this.gapInterior + "rem"
				}
			}
		},
		mounted: function() {
			console.log();
		}
	})
	// --- ---
	// form 面板
	//formStyle 设置表单样式
	//formClass 设置表单class
	//form-id 设置表单id
	//readonly 整个表单只读
	Vue.component("lg-input-group", {
		template: "#lg-input-group",
		props: {
			formStyle: {
				type: [Object, String]
			},
			formClass: {
				type: [Object, String]
			},
			formId: {
				type: String
			},
			readonly: {
				type: String,
				default: "false"
			}
		},
		data: function() {
			return {

			}
		},
		computed: {
			getReadonly: function() {
				if (typeof this.readonly !== "undefined") {
					if (this.readonly === "true") {
						return "lg-form-readonly"
					}
				}
			}
		},
		mounted: function() {}
	})

	//  --- ---
	// 输入框 (input) 
	// value/v-model 绑定值 --
	// placeholder 输入框占位文本 --
	// disabled 禁用  --
	// name 原生属性  --
	// readonly 原生属性 只读 --
	// maxlength 字符的长度 --
	// autofocus 自动获取焦点 --
	// label 输入框关联的label --
	// :inputStyle 设置input的样式 --
	// :inputClass 设置input的class --
	// :labelStyle 设置label的样式 --
	// :labelClass 设置label的class --
	// labelFlex 默认值 6 --
	// inputFlex 默认值 6 --
	Vue.component("lg-input", {
		template: "#lg-input",
		props: {
			value: String,
			label: {
				type: String,
				default: "label"
			},
			placeholder: {
				type: String,
				default: "请输入"
			},
			disabled: {
				default: false
			},
			readonly: {
				default: "false"
			},
			autofocus: {
				default: false
			},
			name: {
				type: String
			},
			id: {
				type: String
			},

			maxlength: {
				type: String
			},
			inputStyle: {
				type: [Object, String]
			},
			inputClass: {
				type: [Object, String]
			},
			labelStyle: {
				type: [Object, String]
			},
			labelClass: {
				type: [Object, String]
			},
			labelFlex: {
				type: String
			},
			inputFlex: {
				type: String
			}
		},
		data: function() {
			return {
				currentValue: this.value,
			}
		},
		computed: {
			getReadonly: function() {
				return this.isTrueOrFalse(this.readonly);
			},
			getDisabled: function() {
				return this.isTrueOrFalse(this.disabled);
			},
			getAutofocus: function() {
				return this.isTrueOrFalse(this.autofocus);
			},
			getLabelWrapStyle: function() {
				if (typeof this.labelFlex !== 'undefined') {
					return {
						flex: this.labelFlex
					}
				}
			},
			getInpuWrapStyle: function() {
				if (typeof this.inputFlex !== 'undefined') {
					return {
						flex: this.inputFlex
					}
				}
			}
		},
		mounted: function() {},
		watch: {
			currentValue: function(val) {
				this.$emit('input', val)
			},
			value: function(val) {
				this.currentValue = val;
			}
		},
		methods: {
			handleChange: function(event) {
				this.currentValue = event.target.value.trim();
			},
			handleInput: function(event) {
				// console.log(event.target.value.trim());
			},
			isTrueOrFalse: function(val) {
				return val === "true" ? true : false;
			}
		}
	})

	//  --- ---
	// 空心三角形 
	Vue.component('lg-triangle-hollow', {
		template: "#lg-triangle-hollow"
	})

	//  --- ---
	// label 文本域名称
	// value 文本域的值
	// :auto-size 自动适配高度
	// :minRows 最小行数 
	// :maxRows 最大行数
	// :disabled 是否无效
	// :textarea-style 文本域的样式
	// :textarea-class 文本域对应的类
	// :label-style  label的样式
	// :label-class  label的类名
	// 文本域名 
	Vue.component('lg-textarea', {
		template: "#lg-textarea",
		props: {
			label: {
				type: String
			},
			value: {
				type: String
			},
			disabled: {
				type: Boolean,
				default: false
			},
			readonly: {
				type: Boolean,
				default: false
			},
			rows: {
				type: [String, Array],
				default: 4
			},
			autoSize: {
				type: Boolean,
				default: true
			},
			textareaStyle: {
				type: Object
			},
			labelStyle: {
				type: Object
			},
			textareaClass: {
				type: [String, Array, Object]
			},
			labelClass: {
				type: [String, Array, Object]
			}
		},
		data: function() {
			return {
				currentValue: this.value
			}
		},
		methods: {
			changeTextareaHeight: function() {
				var _el = event.target;
				if (this.autoSize) {
					_el.style.height = 'auto';
					_el.style.height = _el.scrollHeight + "px";
				}
				this.currentValue = _el.value.trim();
			}
		},
		watch: {
			currentValue: function(val) {
				this.$emit('input', val);
				console.log("currentValue");
			},
			value: function(val) {
				this.currentValue = val;
				console.log("value");
			}
		}

	})

	// --- ---
	// flex 布局
	// justify - flex 布局下的水平排列方式 - string - start/end/center/space-around/space-between - start
	// align - flex 布局下的垂直排列方式 - string - top/middle/bottom - top
	// direction - 主轴的方向 - string - row/rowrev/col/colrev - row
	// :item-center="true" 子元素水平,垂直都居中
	Vue.component('lg-row', {
		template: "#lg-row",
		props: {
			justify: {
				type: String,
				default: "start",
				validator: function(value) {
					return ['start', 'end', 'center', 'space-around', 'space-between'].indexOf(value) !== -1
				}
			},
			align: {
				type: String,
				default: "top",
				validator: function(value) {
					return ['top', 'middle', 'bottom'].indexOf(value) !== -1
				}
			},
			direction: {
				type: String,
				default: "row",
				validator: function(value) {
					return ['row', 'rowrev', 'col', 'colrev'].indexOf(value) !== -1
				}
			},
			itemCenter: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			getJustifyStyle: function() {
				if (this.justify !== 'undefind' && ['start', 'end', 'center', 'space-around', 'space-between'].indexOf(this.justify) !==
					-1) {
					var styleObj = {},
						justifyV = this.justify;
					switch (justifyV) {
						case 'start', 'end':
							styleObj['justify-content'] = 'flex-' + justifyV;
							break;
						default:
							styleObj['justify-content'] = justifyV;
							break;
					}

					return styleObj;

				}
			},
			getAlignStyle: function() {
				if (this.align !== 'undefind' && ['top', 'middle', 'bottom'].indexOf(this.align) !==
					-1) {
					var styleStr = '',
						alignV = this.align;
					switch (alignV) {
						case 'middle':
							styleStr = 'center';
							break;
						case 'bottom':
							styleStr = 'flex-end';
							break;
						default:
							styleStr = 'flex-start';
							break;
					}

					return {
						'alignItems': styleStr
					};

				}
			},
			getDirection: function() {
				var dirV = this.direction;
				if (dirV !== 'undefind' && ['row', 'rowrev', 'col', 'colrev'].indexOf(dirV) !== -1) {
					var styleStr = '';
					switch (dirV) {
						case 'rowrev':
							styleStr = 'row-reverse'
							break;
						case 'col':
							styleStr = 'column'
							break;
						case 'colrev':
							styleStr = ' column-reverse'
							break;
						default:
							styleStr = 'row'
							break;
					}
					return {
						flexDirection: styleStr
					}
				}
			}
		}
	})

	// -- --
	// flex 布局col 
	// span -- 栅格占据的列数 -- String/number  -- 24 
	// order -- 排列顺序 -- String/number  -- 0 
	// basis -- 项目占据的主轴空间 -- String/number  -- 0 
	// self -- 属于自己的对齐方式 -- String -- start/end/center -- start
	Vue.component('lg-col', {
		template: "#lg-col",
		props: {
			span: {
				type: [String, Number],
				default: 0
			},
			order: {
				type: [String, Number],
				default: 0
			},
			basis: {
				type: [String, Number],
				default: "auto"
			},
			self: {
				type: String,
				default: "start",
				validator: function(value) {
					return ['start', 'end', 'center'].indexOf(value) !== -1
				}
			}
		},
		computed: {
			getSelf: function() {
				if (this.self !== 'undefind' && ['start', 'end', 'center'].indexOf(this.self) !== -1) {
					var styleObj = {};
					switch (this.self) {
						case "start", "end":
							styleObj["alignSelf"] = 'flex-' + this.self;
							break;
						case 'center':
							styleObj["alignSelf"] = this.self;
							break;
					}
				}
			}
		}

	})
	
	// -- -- 
	//单选框组
	// 属性	说明	类型	默认值
	// value	指定当前选中的项目数据。可以使用 v-model 双向绑定数据	String | Number	-
	// type	可选值为 button 或不填，为 button 时使用按钮样式	String	-
	// size	尺寸，可选值为large、small、default或者不设置	String	-
	// vertical	是否垂直排列，按钮样式下无效	Boolean	false
	Vue.component('lg-radio-group',{
		name:'RadioGroup',
		template:'#lg-radio-group',
		props:{
			value:{
				type:[String,Number],
				default:''
			},
			vertical:{
				type:Boolean,
				default:false
			},
			name:{
				type:String,
				default:_U.getUUID('lgRadioGroup')
			}
		},
		data:function(){
			return{
				prefixCls:'lg-radio-group',
				currentValue:this.value,
				childrens:[]
			}
		},
		computed:{
			classes:function(){
				return[
					this.prefixCls,
					{
						[this.prefixCls+'-vertical']:this.vertical
					}
				]
			}
		},
		mounted:function(){
			
		},
		methods:{
			updateValue:function(){
				this.childrens = _U.findComponentsDownward(this,'Radio');
				if(this.childrens){
					this.childrens.forEach(function(child){
						child.currentValue = this.currentValue === child.label;
						child.group = true; 
					})
				}
			},
			change:function(data){
				this.currentValue = data.value; 
				this.updateValue(); 
				this.$emit('input',data.value);
				this.$emit('on-change',data.value);
			}
		},
		watch:{
			value:function(){
				if(this.currentValue != this.value){
					this.currentValue = this.value; 
					this.$netxTick( function(){
						this.updateValue();
					} ); 
					
				}
			}
		}
	})
	
	// -- -- 
	// 单选框 
	// 属性	说明	类型	默认值
	// value	只在单独使用时有效。可以使用 v-model 双向绑定数据	Boolean	false
	// label	只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目	String | Number	-
	// disabled	是否禁用当前项	Boolean	false
	// size	单选框的尺寸，可选值为 large、small、default 或者不设置	String	-
	// border 
	// 4.0.0
	// 是否显示边框	Boolean	false
	// true-value	选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	true
	// false-value	没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用	String, Number, Boolean	false
	Vue.component('lg-radio', {
		name:"Radio",
		mixins:[mixinerForm,mixinerEmitter],
		template: '#lg-radio',
		props: {
			value: {
				type: [String,Number,Boolean],
				default:false
			},
			trueValue:{
				type:[String,Number,Boolean],
				default:true
			},
			falseValue:{
				type:[String,Number,Boolean],
				default:false
			},
			label:{
				type:[String,Number]
			},
			disabled:{
				type:Boolean,
				default:false
			},
			name:{
				type:String
			}
			
		},
		data: function() {
			return {
				prefixCls: 'lg-radio',
				currentValue:this.value,
				group:false,
				groupName:this.name,
				parent:_U.findComponentUpward(this,'RadioGroup'),
				focusWrapper:false,
				focusInner:false
			}
		},
		computed: {
			wrapClasses: function() {
				return [
					this.prefixCls + '-wrapper',
					{
						[this.prefixCls+'-group-item']:this.group,
						[this.prefixCls+'-wrapper-checked']:this.currentValue,
						[this.prefixCls+'-wrapper-disabled']:this.itemDisabled,
						[this.prefixCls+'-focus']:this.currentValue
					}
				]
			},
			radioClasses: function() {
				return [
					this.prefixCls ,{
						[this.prefixCls+'-checked']:this.currentValue,
						[this.prefixCls+'-disabled']:this.itemDisabled
					}
				]
			},
			innerClasses: function() {
				return [
					this.prefixCls + "-inner",
					{
						[this.prefixCls+'-focus']: this.focusInner
					}
				]
			},
			inputClasses: function() {
				this.prefixCls + "-input";
			}
		},
		mounted: function() {
			if(this.parent){
				this.group = true; 
				if(this.name && this.name !== this.parent.name){
					if(console.warn) console.warn('[lgView] 没有匹配到 Radio Group 的 name.')
				}else{
					
				}
			}
		}
	})

	//  注册组件 >>>
	var vm = new Vue({
		el: '#app',
		data: function() {
			return {
				value: "666",
				testTag: "false"
			}
		},
		methods: {},
		mounted: function() {}

	})


})
